import { ApartmentOutlined, AppstoreOutlined, CodeOutlined } from "@ant-design/icons";

interface SidebarProps {
  selectedKey: string,
  selectMenu: (key:string)=> void
}
export interface MenuItem {
  key: string;
  label: string;
  icon: JSX.Element;
};
export const menuItems: MenuItem[] = [
  { key: "components", label: "组件", icon: <AppstoreOutlined /> },
  { key: "outline", label: "视图结构", icon: <ApartmentOutlined /> },
  { key: "source", label: "源码", icon: <CodeOutlined /> },
];
export function Sidebar({selectedKey,selectMenu}:SidebarProps) {
  return (
    <aside className="w-[48px] flex-shrink-0 pt-5 flex flex-col z-10 gap-y-3">
      {menuItems.map(item => {
        return <div className={`w-12 h-12 hover:bg-blue-50 hover:text-blue-500 flex items-center justify-center cursor-pointer
          ${selectedKey === item.key ? 'bg-blue-50 border-l-4 border-blue-500 pr-1 text-blue-500' : ''}`}
         key={item.key} onClick={()=>selectMenu(item.key)}>{
          item.icon
         }</div>;
      })}
    </aside>
  );
}
